<template>
  <div>
    <base-list ref="cargo"
               :condition="condition"
               :datas.sync="cargoData"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="100px">
        <el-row>
          <el-col :span="8" class="search-width6">
            <el-form-item label="货类种类名称">
              <auto-search-cargo-type-name @selectName="v=>condition['search_LIKE_cargoTypeName']=v"></auto-search-cargo-type-name>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ml-80"
                       @click="loadData">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row slot="status">
         <el-button type="primary"
                       icon="el-icon-plus"
                       @click="handleDialogFormOpen(false)">新 增</el-button>
          <el-button icon="el-icon-delete"
                      plain
                      @click="handleRemoveAll(multipleSelection)">删 除</el-button>
      </el-row>
      <el-table slot="list"
                ref="multipleTable"
                :data="cargoData"
                border
                stripe
                @selection-change="handleSelectionChange"
                max-height="550">
        <el-table-column type="selection"
                         width="50"></el-table-column>
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="cargoTypeCode"
                         label="货位种类编码"
                         min-width="120"></el-table-column>
        <el-table-column prop="cargoTypeName"
                         label="货物种类名称"
                         min-width="120"></el-table-column>
        <el-table-column prop="remark"
                         label="备注"
                         min-width="200"></el-table-column>
        <el-table-column align="center"
                         label="操作"
                         width="240">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       @click="handleDialogFormOpen(true,scope.row)">
              编辑
            </el-button>
            <el-button type="text"
                       class="danger"
                       size="small"
                       @click="handleRemove(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <div>合计：货物种类 {{total}} 个</div>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 @click="handleRouterPush({path:'/goods/things',name:'货权管理'})">返回</el-button>
    </div>
    <add-cargo-form ref="addCargoForm"
                    @load="loadData"></add-cargo-form>
  </div>
</template>

<script>
import {
  getCargoList,
  deleteCargo,
  deleteCargoAll,
  getCargoTotal
} from '@/api/things/cargo' //表格列表
import autoSearchCargoTypeName from '@/components/autocomplete/autoSearchCargoTypeName'
import { maxLength, sortLength } from '@/utils/rules'
import addCargoForm from './addCargoForm'

export default {
  name: 'thingAttributeForm',
  components: { autoSearchCargoTypeName, addCargoForm },
  data() {
    return {
      condition: {}, // 查询条件
      pageSearch: getCargoList, // 分页查询api接口
      cargoData: [], // table数组
      multipleSelection: [],
      total: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
    //获取货类总数
    getCargoTotal().then(res => {
      this.total = res.data
    })
  },
  methods: {
    loadData() {
      this.$refs.cargo.loadData()
    },
    //点击新增或者编辑
    handleDialogFormOpen(bool, item) {
      if (bool) {
        this.$refs.addCargoForm.form = JSON.parse(JSON.stringify(item))
        this.$refs.addCargoForm.isEdit = true
        this.$refs.addCargoForm.dialogForm = true
      } else {
        this.$refs.addCargoForm.dialogForm = true
      }
    },
    //删除
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCargo(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //获取批量删除的数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //批量删除
    handleRemoveAll(item) {
      this.$confirm(`是否删除选中的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          item.forEach(i => {
            deleteCargo(i.id).then(res => {
              this.$message({
                type: 'success',
                message: `删除成功!`
              })
              this.loadData()
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //返回
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
